<template>
  <panel title="工厂维修工单">
    <el-form class="form-horizontal"
             :model="workOrderDto"
             label-width="120px"
             ref="workOrderForm">
      <el-form-item label="型号">
        <el-input v-model="workOrderDto.model" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="YSTSN">
        <el-input v-model="workOrderDto.ystsn" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="维修人">
        <el-input v-model="workOrderDto.repairer" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="责任归属">
        <el-input v-model="workOrderDto.duty" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="故障分类">
        <el-input v-model="workOrderDto.faultType" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="故障现象" prop="faultAppearance">
        <el-input v-model="workOrderDto.faultAppearance" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="是否用料">
        <el-radio-group v-model="workOrderDto.isMateriel" :disabled="true">
          <el-radio :label="0">是</el-radio>
          <el-radio :label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="故障处理" prop="faultTreatment" v-if="workOrderDto.faultType !== '误报'">
        <el-input v-model="workOrderDto.faultTreatment" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="更换部件一览"
                    v-if="workOrderDto.isMateriel === 0">
        <el-card class="box-card">
          <!--<div slot="header">-->
          <!--<el-button type="text" @click="onBtnAddMaterial">添加部件</el-button>-->
          <!--<el-button type="text" @click="onBtnDelMaterial">删除部件</el-button>-->
          <!--</div>-->
          <el-row :gutter="5" v-for="o in this.materielCount" :key="o">
            <el-col :span="25">
              <el-input v-model.number="workOrderDto.partsName[o-1]" auto-complete="off" placeholder="部件名称"
                        :disabled="true"></el-input>
            </el-col>
            <el-col :span="10">
              <el-input v-model.number="workOrderDto.partsNum[o-1]" auto-complete="off" placeholder="部件数量"
                        :disabled="true"></el-input>
            </el-col>
          </el-row>
        </el-card>
      </el-form-item>
      <el-form-item label="维修结果">
        <el-input v-model="workOrderDto.result" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="报废原因" v-if="workOrderDto.repairResult === 5">
        <el-input v-model="workOrderDto.reason" auto-complete="off" :disabled="true"></el-input>
      </el-form-item>
      <el-button type="primary" @click="download" v-if="workOrderDto.repairResult === 5"
                 :disabled="!workOrderDto.filePath" style="margin-left: 120px">
        下载报废报告
      </el-button>
      <el-button type="primary" @click="onBtnReturn" style="float: right;">返回</el-button>
    </el-form>
  </panel>
</template>

<script>
  import Panel from '@/components/common/Panel'
  import { apiGetRepairDetail } from '@/api/stock/index'
  import {apiDownload} from '@/api/approve/scrap'
  import router from '@/router/index'

  export default {
    components: {Panel},
    created () {
      let listQuery = {
        type: this.$route.query.type,
        id: this.$route.query.id
      }
      this.getFactoryRepairDetail(listQuery)
    },
    data () {
      return {
        materielCount: 0,
        workOrderDto: {
          repairer: '',
          model: '',
          modelId: '',
          brandId: '',
          batch: '',
          ystsn: '',
          duty: '',
          faultType: '',   // 故障类型
          faultAppearance: '',
          isMateriel: '',  // 是否用料
          faultTreatment: '',   // 故障处理方式
          partsNum: [],
          partsName: [],
          replaceParts: '',
          repairResult: '',
          reason: '',
          status: '',
          filePath: ''
        }
      }
    },
    methods: {
      getFactoryRepairDetail (listQuery) {
        // TODO 获取库存一览表
        this.tableLoadingFlag = true
        apiGetRepairDetail(listQuery).then(response => {
          this.materielCount = response.data.partsName.length
          this.workOrderDto = response.data
          this.tableLoadingFlag = false
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      download() {
        let fileNameArr = this.workOrderDto.filePath.split('.')
        let paramsPost = {
          filePath: this.workOrderDto.filePath
        }
        if (fileNameArr[fileNameArr.length - 1] === 'xlsx') {
          apiDownload(paramsPost).then(response => {
            let blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
            window.location.href = URL.createObjectURL(blob)
          }).catch(() => {
          })
        } else if (fileNameArr[fileNameArr.length - 1] === 'zip') {
          apiDownload(paramsPost).then(response => {
            let blob = new Blob([response.data], {type: 'application/x-zip-compressed'})
            window.location.href = URL.createObjectURL(blob)
          }).catch(() => {
          })
        }
      },
      onBtnReturn () {
        // 物流信息录入界面
        router.go(-1)
      }
    }
  }
</script>
